<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			a{text-decoration: none;color: black;}
			ul{width: 788px;height: 508px;background-color: pink;margin: 30px auto;}
			li{width: 187px;height: 240px;background-color: rosybrown;text-align: center;font-size: 10px;float: left;margin: 0 0 10px 10px;}
			img{margin-top: 26px;margin-bottom: 26px;width: 100px;height: 100px;}
			h4{font-weight: normal;color: #5c5c5c;/* font-size: 10px; */}
			p{/* font-size: 10px; */color: gray;}
			span{/* font-size: 10px; */color: orange;}
			/* 划过li   让li向上移动5px 移动之后要占位*/
			li:hover{
				position: relative;
				top: -5px;
				/* margin-top: -20px; */
			}
		</style>
	</head>
	<body>
		<ul class="list">
			
		</ul>
	</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$.ajax({
		url:"json/list.json",
		method:"GET",
		success:function(result){
			getData(result)
		}
	});
	function getData(result){
		let data = result.list;
		for(let i=0;i<data.length;i++){
			let oLI = $("<li></li>");
			let oUl = $(".list")
			oLI.html(
			`
			<a href="xq.html?id=${data[i].id}">
				<img src="${data[i].imgSrc}" >
				<h4>${data[i].title}</h4>
				<p>${data[i].desc}</p>
				<span>${data[i].price}元</span>
			</a>					
			`
			).appendTo(oUl)
		}
	}
</script>
